<template>
    <div>
        <el-container>
            <el-header>
                <!-- 导航栏 -->
                <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1" class="left" @click="doHospitalApply">申请住院</el-menu-item>
                    <el-menu-item index="2" class="left">预约医师</el-menu-item>

                    <el-menu-item index="3" class="right" @click="loginAndRegister" v-if="loginHint == '登录'">{{ loginHint
                    }}</el-menu-item>
                    <el-submenu index="4" class="right" v-else>
                        <template slot="title">{{ loginHint }}</template>
                        <el-menu-item index="4-1" @click="toPersonalCenter">个人中心</el-menu-item>
                        <el-menu-item index="4-2" @click="exit">退出登录</el-menu-item>
                    </el-submenu>
                </el-menu>
                <!-- 导航栏结束 -->
            </el-header>

            <!-- 申请住院开始 -->
            <el-dialog title="申请住院" :visible.sync="hospitalApplyFormVisible">
                <el-form :model="hospitalApplyForm">
                    <el-form-item label="您的科室" label-width="150px">
                        <el-cascader v-model="hospitalApplyForm.deptId" :options="Deptwithdoctor" :props="props"
                            @change="chooseDeptId" :show-all-levels="false">
                        </el-cascader>
                    </el-form-item>
                    <br>
                    <el-form-item label="主治医师" label-width="150px">
                        <el-select v-model="hospitalApplyForm.doctor" placeholder="请选择">
                            <el-option v-for="item in selectDoctor" :key="item.userId" :label="item.realName"
                                :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <br>
                    <el-form-item label="病情说明" label-width="150px">
                        <el-input type="textarea" :rows="2" placeholder="请输入您的病情说明" v-model="hospitalApplyForm.remark">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" round size="mini" @click="hospitalApplyFormVisible = false">取 消</el-button>
                    <el-button type="primary" round size="mini" @click="doHospitalApply">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 申请住院结束 -->
            <el-main>
                <!-- 轮播图 -->
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                    </el-carousel-item>
                </el-carousel>
                <!-- 轮播图 -->
                <h1 style="text-align: center;">门诊专家出诊信息</h1>
                <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
                    <el-table-column prop="deptName" label="科室"></el-table-column>

                    <el-table-column label="星期一">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.one" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期二">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.two" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期三">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.three" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期四">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.four" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期五">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.five" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期六">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.six" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="星期日">
                        <template slot-scope="scope">
                            <div v-for="temp of scope.row.seven" class="showName">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <img src="../../img/tran1.jpg" alt="" width="100px" height="100px"><br />
                                        年龄:{{ temp.userAge }}<br />
                                        电话号:{{ temp.userPhone }}
                                    </div>
                                    <el-button>{{ temp.realName }}</el-button>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
            <el-footer>关于我们</el-footer>
        </el-container>
        <!-- 登录与注册模态框开始 -->
        <div class="box clearfix" ref="login" style="display: none;">
            <div class="card login" id="front">
                <el-switch v-model="loginStatus" @change="transition" active-text="登录" inactive-text="注册" class="but_swith">
                </el-switch>
                <div class="el-icon-error close_swith" @click="close"></div>
                <el-form label-width="80px" :model="formLogin" class="form">
                    <el-form-item label="账号">
                        <el-input v-model="formLogin.username" label-width="80px" placeholder="请输入您的账号"></el-input>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="密码">
                        <el-input v-model="formLogin.password" label-width="80px" placeholder="请输入您的密码"></el-input>
                    </el-form-item>
                    <br>
                    <el-checkbox v-model="checked" style="margin-left: 60px; ">记住密码</el-checkbox>
                    <el-button round size="mini" type="primary" style="margin-left: 60px;" @click="doLogin">登录</el-button>
                </el-form>
            </div>
            <div class="card res" id="back">
                <el-switch v-model="loginStatus" @change="transition" active-text="登录" inactive-text="注册" class="but_swith">
                </el-switch>
                <div class="el-icon-error close_swith" id="close" @click="close"></div>
                <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm form">
                    <el-form-item label="您的姓名">
                        <el-input v-model="ruleForm.patientName" label-width="70px" placeholder="请输入您的真实姓名"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="您的账号">
                        <el-input v-model="ruleForm.username" label-width="70px" placeholder="请输入您的账号"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-button type="primary" round size="mini" @click="submitForm()">提交</el-button>
                        <el-button round type="warning" size="mini" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 登录与注册模态框结束 -->
    </div>
</template>
<script>
import { findAllByDoctorSort, doLogin, register } from "@/api/frontPatient/frontPatient.js";
export default {
    data() {
        return {
            loginHint: "登录",
            hospitalApplyForm: {},//申请住院表单
            hospitalApplyFormVisible: false,//隐藏住院申请表单
            selectDoctor: [],//展示医生，选择医师
            tableData: [],
            checked: "",//记住密码
            ruleForm: {},//注册
            choseDate: "",//选择日期
            formLogin: {},//登录
            loginStatus: true,//登录与注册页面切换
            afterLoginForm: {},//登录后从数据库种返回的记录--->该病患的所有信息
            Deptwithdoctor: [],//展示医生的部门，
            props: {
                expandTrigger: 'hover',
                value: 'deptId',
                label: 'deptName',
                children: 'children',
                emitPath: false,
            }
        };
    },

    methods: {
        //翻转按钮
        transition() {
            this.loginStatus ? this.login() : this.regisger();
        },
        //显示登录界面
        loginAndRegister() {
            if (this.loginHint == "登录") {
                this.loginStatus = true;
                this.transition();
                this.$refs.login.style.setProperty("display", "block")
            }
        },
        //由登录翻转到注册
        regisger() {
            document.getElementById("front").style.transform = "rotateY(-180deg)"
            document.getElementById("back").style.transform = "rotateY(0deg)"
        },
        //由注册翻转到登录
        login() {
            document.getElementById("front").style.transform = "rotateY(0deg)"
            document.getElementById("back").style.transform = "rotateY(-180deg)"
        },
        //重置注册信息
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //关闭登录注册模态框
        close() {
            this.$refs.login.style.setProperty("display", "none")
        },
        //根据选择的部门id选择那一个其下属的医生
        chooseDeptId() {
            let doctordept = this.Deptwithdoctor;
            this.selectDoctor = [];
            for (let i = 0; i < doctordept.length; i++) {
                if (doctordept[i].deptId == this.hospitalApplyForm.deptId) {
                    this.selectDoctor = doctordept[i].doctors;
                }
            }

            //this.selectDoctor = doctordept.filter(dept=>dept.deptId === this.hospitalApplyForm.deptId).map(dept =>dept.doctors)
        },
        //登录
        doLogin() {
            doLogin(this.formLogin).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg);
                    this.formLogin={}
                    this.afterLoginForm = res.data;
                    console.log(this.afterLoginForm);
                    this.loginHint = res.data.patientName + "已登录";
                    sessionStorage.setItem("loginPatient", JSON.stringify(this.afterLoginForm));
                    this.close();
                    return;
                }
                let msg = res.data.match(/[\u4e00-\u9fa5]/g).join("");
                this.$message.error(msg);
            });
        },
        //注册
        submitForm() {
            this.ruleForm.patientSalary=0
            register(this.ruleForm).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg + "请尽快前往个人中心完善资料");
                    this.afterLoginForm = res.data;
                    this.loginHint = res.data.patientName + "已登录";
                    sessionStorage.setItem("loginPatient", JSON.stringify(this.afterLoginForm));
                    
                    this.ruleForm={};
                    this.close();
                    return;
                }
                let msg = res.data.match(/[\u4e00-\u9fa5]/g).join("");
                this.$message.error(msg);
            });
        },
        //打开申请表单时校验是否登录
        doHospitalApply() {
            if (this.loginHint == "登录") {
                this.$message.warning("您还未登录");
                this.loginStatus = true;
                this.transition();
                this.loginAndRegister();
                return;
            }
            this.hospitalApplyFormVisible=true;
        },
        //跳转到个人中心页面
        toPersonalCenter() {
            if (this.loginHint == "登录") {
                this.$message.warning("您还未登录");
                this.loginStatus = true;
                this.transition();
                this.loginAndRegister();
                return;
            }
            this.$router.push(`/FrontPatient/PersonalCenter/1`)
        },
        //退出登录
        exit() {
            this.loginHint = "登录";
            sessionStorage.clear("loginPatient");
            this.afterLoginForm={};
        },

    },
    mounted() {
        findAllByDoctorSort().then(res => {
            if (res.code === 200) {
                this.tableData = res.data.depts;
                this.Deptwithdoctor = res.data.doctorByMedical;
            }
        });
        let loginPatient = sessionStorage.getItem("loginPatient");
        
        if (loginPatient != null) {
            loginPatient=JSON.parse(loginPatient)
            this.afterLoginForm = loginPatient;
            this.loginHint = this.afterLoginForm.patientName + "已登录";
        }
        this.afterLoginForm = {};
    },
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.el-footer {
    line-height: 60px;
    text-align: center;
    background-color: aliceblue;
}

.el-carousel__item:nth-child(6) {
    background-image: url("../../img/tran1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.el-carousel__item:nth-child(5) {
    background-image: url("../../img/tran2.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.el-carousel__item:nth-child(3) {
    background-image: url("../../img/tran3.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.el-carousel__item:nth-child(4) {
    background-image: url("../../img/tran4.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.el-main {
    color: #333;
    background-size: 100% 100%;
    height: 600px;
}

.right {
    width: 100px;
    text-align: center;
    float: right;
    margin: 0 30px;
}

.left {
    width: 100px;
    text-align: center;
    float: left;
    margin: 0 30px;
}

.box {
    width: 400px;
    height: 500px;
    margin: auto;
    overflow: hidden;
    position: absolute;
    top: 100px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 15px;
    z-index: 100;
}

.clearfix::after {
    content: '';
    display: text;
    clear: both;
}

.card {
    width: 100%;
    height: 65%;
    background-color: rgb(255, 255, 255);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform .8s ease-in-out;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    border-radius: 15px;
    box-shadow: 1px 5px 13px 6px rgba(0, 0, 0, 0.279);
}

.res {
    height: 90%;
}

#front {
    transform: rotateY(0deg);
}

#back {
    transform: rotateY(180deg);
}

.but_swith {
    top: -45%;
    right: -1%;
}

.form {
    margin-left: -75px;
}

.close_swith {
    position: absolute;
    margin-top: -77%;
    left: 95%;
}

.close_swith {
    cursor: pointer;
}

#close {
    margin-top: -430px;
}

.showName {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>